<template>
  <div class="stat-cards-root">
    <!-- 1 -->
    <div :style="'background-color:' + solorStyle?.firstColor + ';color: #ffffff'" class="stat-alert">
      <div :style="'color:' + solorStyle?.firstColorFlip" class="background-icon icongc gc-jinggao"></div>
      <div class="stat-content">
        <div style="display: flex;flex-direction: row;justify-content: space-around;align-items: center;">
          <div class="icongc gc-jinggao" style="font-size: 50px;"></div>
          <div style="margin-left: 10px;">
            <div style="font-size: 30px;">{{ alertCount > 999 ? '999+' : alertCount }}</div>
            <div style="font-size: 14px;">Alert Count</div>
          </div>
        </div>
        <el-divider />
        <div style="display: flex;flex-direction: row;justify-content: space-around;align-items: center;">
          <div class="icongc gc-jvmxinxi" style="font-size: 40px;"></div>
          <div style="margin-left: 18px;">
            <div style="font-size: 20px;">On {{ nodeCount.online }}</div>
            <div style="font-size: 15px;">Off {{ nodeCount.offline }}</div>
            <div style="font-size: 14px;">Node Count</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 2 -->
    <div :style="'background-color:' + solorStyle?.secondColor + ';color: #ffffff'" class="web-link">
      <div :style="'color:' + solorStyle?.secondColorFlip" class="background-icon icongc gc-wenzhang1"></div>
      <div class="stat-content">
        <div class="stat-web-content">
          <div v-for="link in selfLink">
            <div class="link" :href="link.url" @click="toView(link.url)">{{ link.name }}</div>
          </div>
          <el-divider />
          <div v-for="link in docLink">
            <div class="link" :href="link.url" @click="toView(link.url)">{{ link.name }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { monitorAppsApi } from "@/api/guardcat";
import { alertCountApi } from "@/api/alert";
import { getSolorColor, toView } from "@/assets/utils/util";
import type { SolarColor } from "@/assets/utils/util";
import { isNotNull } from "@/assets/utils/obj";


const selfLink = ref([
  { url: 'https://www.wangyunf.com/blog', name: '个人首页' },
  { url: 'https://www.wangyunf.com/blog/#/yq/special', name: '专题文章' },
  { url: 'https://www.yuque.com/xiaozeizeizi', name: '语雀首页' },
  { url: 'https://gitee.com/jasminexz', name: 'Gitee 首页' },
  { url: 'https://www.wangyunf.com/danci', name: '✎ Danci/e ✎' },
  { url: 'https://www.wangyunf.com/guardcat', name: 'ฅ Guard Cat ฅ' }
])

const docLink = ref([
  { url: 'http://192.168.31.99:8808', name: 'Nacos  【内网】' },
  { url: 'http://192.168.31.99:5601', name: 'Kibana 【内网】' },
  { url: 'http://192.168.31.99:3000', name: 'Grafana【内网】' },
  { url: 'https://github.com/alibaba/spring-cloud-alibaba/wiki/%E7%89%88%E6%9C%AC%E8%AF%B4%E6%98%8E', name: 'SpringCloud 版本说明' },
  { url: 'https://docs.spring.io/spring-cloud-commons/docs/current/reference/html/#spring-cloud-context-application-context-services', name: 'SpringCloud 文档' },
  { url: 'https://www.elastic.co/guide/en/elasticsearch/reference/current/elasticsearch-intro.html', name: 'ElasticSearch 文档' },
  { url: 'https://sentinelguard.io/zh-cn/', name: 'Sentinel 官网' },
  { url: 'https://nacos.io/zh-cn/index.html', name: 'Nacos 官网' },
])

const alertCount = ref(0);

const nodeCount = ref({
  online: 0,
  offline: 0
})

const solorStyle = ref<SolarColor>();

// -------------------- method
const getMonitorApps = () => {
  monitorAppsApi().then(resp => {
    let online = 0;
    let offline = 0;

    resp.data.forEach((apps: any) => {
      if (isNotNull(apps.machines)) {
        apps.machines.forEach((machine: any) => {
          if (machine.online) {
            online++;
          } else {
            offline++;
          }
        });
      }
    });

    nodeCount.value.online = online;
    nodeCount.value.offline = offline;
  })
}

const solarColorHandler = () => {
  solorStyle.value = getSolorColor();
}

const getAlertCount = () => {
  alertCountApi().then(resp => {
    alertCount.value = Number(resp.data);
  })
}

onMounted(() => {
  solarColorHandler()
  getMonitorApps();
  getAlertCount();
})

</script>

<style scoped lang="scss">
.stat-cards-root {
  @include box(100%, 100%);
  min-width: 180px;
  height: 100%;
  border-radius: 10px 10px;
  position: relative;

  .stat-alert,
  .web-link {
    border-radius: 10px;
    padding: 8px;
    transition: width 0.3s, box-shadow 0.3s;
    overflow: hidden;
    z-index: 3;

    [class="dark"] & {
      filter: brightness(70%);
    }

    &:hover {
      width: calc(100% + 100px);

      .background-icon {
        right: 0px;
      }
    }

    .background-icon {
      position: absolute;
      bottom: -15px;
      right: -35px;
      font-size: 150px;
      transition: right 0.3s;
      z-index: -1;
    }

    .stat-content {
      @include flex(column, center, center);
      height: 100%;

      .stat-web-content {
        @include box(100%, 100%);
        @include flex(column, space-around, flex-start);
        transition: width 0.3s;

        &:hover {
          width: 80%;
        }
      }

      .link {
        @include font(13px, 500);
        position: relative;
        display: block;
        color: inherit;
        text-decoration: none;
        transition: 0.5s;
        cursor: pointer;

        &:hover {}

        &::after {
          position: absolute;
          content: "";
          top: 100%;
          left: 0;
          width: 100%;
          height: 2px;
          background: #d1d1d1;
          transform: scaleX(0);
          transform-origin: right;
          transition: transform 0.3s;
        }

        &:hover::after {
          transform: scaleX(1);
          transform-origin: left;
        }
      }
    }
  }

  .stat-alert {
    @include box(100%, 25%);
    background-color: #c7c0ba;
    position: absolute;

    &:hover {
      box-shadow: 10px 0px 10px 1px rgba(0, 0, 0, .3);
    }
  }

  .web-link {
    @include box(100%, calc(75% - 10px));
    top: calc(25% + 10px);
    border-bottom-right-radius: 40px;
    position: absolute;

    &:hover {
      box-shadow: 10px 10px 10px 1px rgba(0, 0, 0, .3);
    }
  }

  :deep(.el-divider--horizontal) {
    margin: 10px 0;
    border: 1px solid;
  }


}
</style>